<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->
<ol class="breadcrumb">
  <li><a href="#/views">{{'common.views' | translate}}</a></li>
  <li class="active">{{'views.create' | translate}}</li>
</ol>
<hr>
<form class="form-horizontal create-view-form" role="form" name="form.instanceCreateForm" novalidate>
  <div class="view-header">
    <div class="form-group">
      <div class="col-sm-2">
        <label for="" class="control-label">{{'common.view' | translate}}</label>
      </div>
      <div class="col-sm-10"><label for="" class="control-label">{{view.ViewVersionInfo.view_name}}</label></div>
    </div>
    <div class="form-group">
      <div class="col-sm-2"><label for="" class="control-label">{{'common.version' | translate}}</label></div>
      <div class="col-sm-3">
        <select ng-model="version" class="instanceversion-input form-control" ng-change="versionChanged()" ng-options="o as o for o in versions"></select>
      </div>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">{{'common.details' | translate}}</h3>
    </div>
    <div class="panel-body">
      <div class="form-group"
      ng-class="{'has-error' : ( (form.instanceCreateForm.instanceNameInput.$error.required || form.instanceCreateForm.instanceNameInput.$error.pattern) && form.instanceCreateForm.submitted) || instanceExists }"
      >
        <label for="" class="control-label col-sm-3">{{'views.instanceName' | translate}}*</label>
        <div class="col-sm-9">
          <input type="text" class="form-control instancename-input" name="instanceNameInput" ng-pattern="nameValidationPattern" required ng-model="instance.instance_name" autocomplete="off">

          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.required && form.instanceCreateForm.submitted'>{{'common.alerts.fieldIsRequired' | translate}}</div>
          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.instanceNameInput.$error.pattern && form.instanceCreateForm.submitted'>{{'views.alerts.noSpecialCharsOrSpaces' | translate}}</div>
          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='instanceExists'>{{'views.alerts.instanceExists' | translate}}</div>
        </div>
      </div>
      <div class="form-group"
      ng-class="{'has-error' : ( (form.instanceCreateForm.displayLabel.$error.required || form.instanceCreateForm.displayLabel.$error.pattern) && form.instanceCreateForm.submitted)}">
        <label for="" class="control-label col-sm-3">{{'views.displayName' | translate}}*</label>
        <div class="col-sm-9">
          <input type="text" class="form-control instancelabel-input" name="displayLabel" ng-model="instance.label" required ng-pattern="/^([a-zA-Z0-9._\s]+)$/" autocomplete="off">

          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.required && form.instanceCreateForm.submitted'>
            {{'common.alerts.fieldIsRequired' | translate}}
          </div>
          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.displayLabel.$error.pattern && form.instanceCreateForm.submitted'>
            {{'views.alerts.noSpecialChars' | translate}}
          </div>
        </div>
      </div>
      <div class="form-group" ng-class="{'has-error' : form.instanceCreateForm.description.$error.required && form.instanceCreateForm.submitted }">
        <label for="" class="control-label col-sm-3">{{'views.description' | translate}}*</label>
        <div class="col-sm-9">
          <input type="text" class="form-control" name="description" ng-model="instance.description" maxlength="140" required>
          <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm.description.$error.required && form.instanceCreateForm.submitted'>
            {{'common.alerts.fieldIsRequired' | translate}}
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-10 col-sm-offset-3">
          <div class="checkbox">
            <label>
              <input type="checkbox" ng-model='instance.visible' class="visibilityCheckbox"> {{'views.visible' | translate}}
            </label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-default" ng-hide="!numberOfSettingConfigs">
    <div class="panel-heading">
      <h3 class="panel-title">{{'views.settings' | translate}}</h3>
    </div>
    <div class="panel-body">
      <div class="form-group" ng-repeat="parameter in instance.properties | filter:{clusterConfig:false}"
           ng-class="{'has-error' : ((form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted) || form.instanceCreateForm[parameter.name].validationError)}" >
        <label for="" class="col-sm-3 control-label" ng-class="{'not-required': !parameter.required}">{{parameter.label || parameter.displayName}}{{parameter.required ? '*' : ''}}</label>
        <div ng-switch="parameter.type">
          <div class="col-sm-9 checkbox" ng-switch-when="boolean">
            <input type="checkbox" class="viewproperty-input" name="{{parameter.name}}" ng-required="parameter.required" ng-model="parameter.value" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter">
          </div>
          <div class="col-sm-9" ng-switch-default>
            <input type="{{parameter.masked ? 'password' : 'text'}}" class="form-control viewproperty-input" name="{{parameter.name}}" ng-change="form.instanceCreateForm[parameter.name].validationError=''" ng-required="parameter.required" ng-model="parameter.value" autocomplete="off" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter" placeholder="{{parameter.placeholder}}">
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted'>
              {{'common.alerts.fieldIsRequired' | translate}}
            </div>
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].validationError'>
              {{form.instanceCreateForm[parameter.name].validationMessage}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="panel panel-default" ng-hide="!numberOfClusterConfigs && !clusterConfigurable">
    <div class="panel-heading">
      <h3 class="panel-title">{{'views.clusterConfiguration' | translate}}</h3>
    </div>

    <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
      <div class="checkbox create-checkbox-cluster">
        <label>
          <input type="radio" ng-disabled="!clusterConfigurable || noLocalClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="LOCAL_AMBARI" class="visibilityCheckbox"> {{'views.localCluster' | translate}}
        </label>
      </div>

      <div class="form-horizontal property-form">
        <div class="form-group">

          <label for="" class="control-label col-sm-3 ng-binding not-required" >{{'views.clusterName' | translate}}</label>
          <div>
            <div class="col-sm-9">
              <select ng-model="cluster" ng-disabled="instance.clusterType != 'LOCAL_AMBARI' || noLocalClusterAvailible" ng-change="onClusterChange()" class="clusters-name-dropdown form-control"  ng-options="o as o.name for o in clusters"></select>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="panel-body property-form" popover="{{clusterConfigurableErrorMsg}}" popover-trigger="mouseenter">
      <div class="checkbox create-checkbox-cluster">
        <label>
          <input type="radio" ng-disabled="!clusterConfigurable || noRemoteClusterAvailible" ng-model="instance.clusterType" ng-change="enableLocalCluster()" value="REMOTE_AMBARI" class="visibilityCheckbox"> {{'views.remoteCluster' | translate}}
        </label>
      </div>

      <div class="form-horizontal property-form">
        <div class="form-group">

          <label for="" class="control-label col-sm-3 ng-binding not-required" >{{'views.clusterName' | translate}}</label>
          <div>
            <div class="col-sm-9">
              <select ng-model="data.remoteCluster" ng-disabled="instance.clusterType != 'REMOTE_AMBARI' || noRemoteClusterAvailable" ng-change="onClusterChange()" class="clusters-name-dropdown form-control"  ng-options="o as o.name for o in remoteClusters"></select>
            </div>
          </div>
        </div>
      </div>

    </div>

    <div class="panel-body property-form" ng-hide="!numberOfClusterConfigs">
      <div class="checkbox">
        <label>
          <input type="radio" ng-model="instance.clusterType" value="NONE" class="visibilityCheckbox"> {{'views.custom' | translate}}
        </label>
      </div>
      <div class="alert alert-danger bottom-margin top-margin" ng-show='form.instanceCreateForm.generalValidationError'>
        {{form.instanceCreateForm.generalValidationError}}
      </div>
      <div class="form-group" ng-repeat="parameter in instance.properties | filter:{clusterConfig:true}"
        ng-class="{'has-error' : ((form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted) || form.instanceCreateForm[parameter.name].validationError)}" >
        <label for="" class="col-sm-3 control-label" ng-class="{'not-required': !parameter.required}">{{parameter.label || parameter.displayName}}{{parameter.required ? '*' : ''}}</label>
        <div ng-switch="parameter.type">
          <div class="col-sm-9 checkbox" ng-switch-when="boolean">
            <input type="checkbox" class="viewproperty-input" name="{{parameter.name}}" ng-disabled="instance.clusterType == 'NONE'" ng-required="parameter.required && (instance.clusterType == 'NONE')" ng-model="parameter.value" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter">
          </div>
          <div class="col-sm-9" ng-switch-default>
            <input type="{{parameter.masked ? 'password' : 'text'}}" class="form-control viewproperty-input" name="{{parameter.name}}" ng-disabled="instance.clusterType != 'NONE'" ng-change="form.instanceCreateForm[parameter.name].validationError=''" ng-required="parameter.required && (instance.clusterType == 'NONE')" ng-model="parameter.value" autocomplete="off" popover="{{parameter.description}}" popover-title="{{parameter.name}}" popover-trigger="mouseenter" placeholder="{{parameter.placeholder}}">
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show="form.instanceCreateForm[parameter.name].$error.required && form.instanceCreateForm.submitted && (instance.clusterType == 'NONE')">
              {{'common.alerts.fieldIsRequired' | translate}}
            </div>
            <div class="alert alert-danger no-margin-bottom top-margin" ng-show='form.instanceCreateForm[parameter.name].validationError'>
              {{form.instanceCreateForm[parameter.name].validationMessage}}
            </div>
          </div>
        </div>
      </div>
      <div ng-show="!instance.properties.length">
        <div class="alert alert-info">{{'views.alerts.notDefined' | translate: '{term: constants.props}'}}</div>
      </div>
    </div>
  </div>

  <div class="col-sm-12 ">
    <button class="btn btn-primary pull-right left-margin save-button"
            ng-class="{'disabled' : (form.instanceCreateForm.isSaving)}" ng-click="save()" type="submit">{{'common.controls.save' | translate}}</button>
    <a href ng-click="cancel()" class="btn btn-default pull-right cancel-button">{{'common.controls.cancel' | translate}}</a>
  </div>

</form>
